<template>
  <div class="app-container">
    <el-card shadow="never" class="main-head">
      <el-row :gutter="4">
        <el-col :span="5">
          <div class="head-label">中文名:</div>
          <el-input placeholder="请输入中文名"></el-input>
        </el-col>
        <el-col :span="5">
          <div class="head-label">分子简式:</div>
          <el-input placeholder="请输入分子简式"></el-input>
        </el-col>
        <el-col :span="5">
          <div class="head-label">SMILES:</div>
          <el-input placeholder="请输入SMILES"></el-input>
        </el-col>
        <el-col :span="5">
          <div class="head-label">casNo:</div>
          <el-input placeholder="请输入casNo"></el-input>
        </el-col>
        <el-col :span="4">
          <div class="head-label" style="width: 41px">熔点:</div>
          <el-input class="input-f" placeholder="请输入熔点"></el-input>
        </el-col>
        <el-col :span="5">
          <div class="head-label">密度:</div>
          <el-input placeholder="请输入密度"></el-input>
        </el-col>
        <el-col :span="5">
          <div class="head-label">闪点:</div>
          <el-input placeholder="请输入闪点"></el-input>
        </el-col>
        <el-col :span="5">
          <div class="head-label">沸点:</div>
          <el-input placeholder="请输入沸点"></el-input>
        </el-col>
        <el-col :span="9">
          <div class="caozuo">
            <el-button class="search-btn" icon="el-icon-search" type="danger"
              >搜索</el-button
            >
            <el-button class="add-btn" icon="el-icon-plus" plain
              >新增</el-button
            >
            <el-button class="reset-btn" icon="el-icon-refresh-right" plain
              >重置</el-button
            >
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="never" class="card-container">
      <el-table
        v-loading="loading"
        :data="dataList"
        border
        :header-cell-style="{ 'font-size': '17px' }"
        style="width: 100%; font-size: 17px"
      >
        <el-table-column type="selection" width="50" fixed align="center" />
        <el-table-column label="id" align="center" width="80" prop="id">
        </el-table-column>
        <el-table-column
          v-if="item != 'id'"
          v-for="(item, index) in keys"
          :label="item"
          align="center"
          width="120"
          :prop="item"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          fixed="right"
          class-name="small-padding fixed-width"
          width="130"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import {
  listBasicInfo,
  getBasicInfo,
  delBasicInfo,
  addBasicInfo,
  updateBasicInfo,
  exportBasicInfo,
} from "@/api/output/basicInfo";
import {
  listDynamicsData,
  getDynamicsData,
  delDynamicsData,
  addDynamicsData,
  updateDynamicsData,
  exportDynamicsData,
} from "@/api/output/DynamicsData";
import {
  listThermoInfo,
  getThermoInfo,
  delThermoInfo,
  addThermoInfo,
  updateThermoInfo,
  exportThermoInfo,
} from "@/api/output/thermoInfo";

export default {
  name: "mainDataDetail",
  data() {
    return {
      dataName: "",
      dataList: [],
      total: 0,
      keys: [],
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.dataName = this.$route.query.dataSource;
    this.keys = Object.keys(this.$route.query);
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      if (this.dataName == "物种数据库") {
        listBasicInfo(this.queryParams).then((response) => {
          this.dataList = response.rows;
          this.keys = Object.keys(this.dataList[0]);
          this.total = response.total;
          this.loading = false;
        });
      } else if (this.dataName == "动力学数据库") {
        listDynamicsData(this.queryParams).then((response) => {
          this.dataList = response.rows;
          this.keys = Object.keys(this.dataList[0]);
          this.total = response.total;
          this.loading = false;
        });
      } else {
        listThermoInfo(this.queryParams).then((response) => {
          this.dataList = response.rows;
          this.keys = Object.keys(this.dataList[0]);
          this.total = response.total;
          this.loading = false;
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.main-head {
  min-width: 1152px;
  margin: 0 1.5rem 0.6875rem 0;
  height: 120px;
  background: #ffffff;
  border-radius: 8px;
  opacity: 1;
  .el-col {
    margin-bottom: 16px;
  }
  .head-label {
    display: inline-block;
    width: 68px;
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    text-align: right;
  }
  ::v-deep .el-input {
    width: 160px;
    &__inner {
      width: 160px;
      height: 31px;
      border-radius: 5px;
      margin-left: 15px;
      font-size: 14px;
      font-family: "PuHuiTi";
      font-weight: 400;
    }
  }
  .input-f {
    width: 128px;
    ::v-deep .el-input__inner {
      padding-right: 0;
      width: 128px;
    }
  }
}

.card-container {
  min-width: 1152px;
  margin: 0 1.5rem 0.6875rem 0;
  // height: 611px;
  padding: 16px;
  background: #ffffff;
  border-radius: 8px;
  margin-top: 16px;
}

.caozuo {
  display: flex;
  justify-content: flex-end;
  padding-right: 14px;
  .el-button {
    padding: 0;
    width: 108px;
    height: 32px;
    font-size: 14px;
    font-weight: 600;
    font-family: "PuHuiTi";
    border-radius: 4px;
    &--danger {
      border-color: #bd4541;
    }
  }
  .search-btn {
    background: #bd4541;
    color: #ffffff;
  }
  .add-btn {
    border: 1px solid #bd4541;
    color: #bd4541;
  }
  .resetbtn {
    border: 1px solid #eeeeee;
    color: #666666;
  }
}
</style>
